<template>
	<view class="list_after">
		<view class="after_top">
			<image class="images" src="" mode=""></image>
			<text class="name">{{shoplist.name}}</text>
			<text class="name status">处理中</text>
		</view>
		<view class="after_center">
			<image class="center_img" src="" mode=""></image>
			<text class="titles">电视剧《如意芳霏》官方周边衍生品珠宝黄金纯度极高198g</text>
			<text class="center_mar sfk">实付款：</text>
			<text class="center_mar fh">¥</text>
			<text class="center_mar">283.92</text>
			<text class="center_num">x1</text>
		</view>
		<view class="after_bottom">
			<text class="bottom_status">退款退货</text>
			<text class="bottom-btn">撤回申请</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			shoplist: {
				type: Object,
				default: () => {
					console.log(this.shoplist)
					return {};
				}
			},
		},
		data() {
			return {}
		},
		created() {},
		methods: {}
	}
</script>

<style>
	page{
		background: #F5F5F5;
	}
	.list_after {
		width: 706rpx;
		height: 407rpx;
		background: #FFFFFF;
		opacity: 1;
		margin: auto;
		margin-top: 25rpx;
		border-radius: 16px;
	}

	.after_top {
		width: 663rpx;
		height: 79rpx;
		margin: auto;
		border-bottom: 1px solid #EEEEEE;
	}

	.images {
		width: 36rpx;
		height: 36rpx;
		background: #F5F5F5;
		border-radius: 50%;
		float: left;
		margin: 21rpx 21rpx 21rpx 0;
	}

	.name {
		width: 416rpx;
		height: 79rpx;
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		opacity: 0.65;
		display: inline-block;
		float: left;
		line-height: 79rpx;
		overflow: hidden;
	}

	.status {
		color: #EB3E3E;
		float: right;
		width: auto;
	}

	.after_center {
		width: 663rpx;
		height: 226rpx;
		margin: auto;
		border-bottom: 1px solid #EEEEEE;
	}

	.center_img {
		width: 173rpx;
		height: 173rpx;
		border-radius: 7rpx;
		float: left;
		margin-top: 25rpx;
		background: #F5F5F5;
	}

	.titles {
		width: 460rpx;
		height: 72rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 36rpx;
		color: #21201D;
		opacity: 1;
		margin-top: 25rpx;
		margin-left: 28rpx;
		overflow: hidden;
		display: inline-block;
		float: left;
	}

	.center_mar {
		margin-top: 54rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #EB3E3E;
		opacity: 1;
		display: inline-block;
	}

	.sfk {
		margin-left: 28rpx;
		font-size: 21rpx;
		color: #999999;
	}

	.fh {
		color: #999999;
		font-size: 21rpx;
		color: #EB3E3E;
	}

	.center_num {
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		opacity: 1;
		float: right;
		margin-top: 61rpx;
	}

	.after_bottom {
		width: 663rpx;
		margin-left: 25rpx;
	}

	.bottom_status {
		color: #999999;
		font-size: 21rpx;
		display: inline-block;
		margin-top: 36rpx;
	}

	.bottom-btn {
		padding: 0rpx 28rpx 0rpx 28rpx;
		background: #FFFFFF;
		border-radius: 25rpx;
		border: 1rpx solid #EEEEEE;
		font-size: 21rpx;
		text-align: center;
		line-height: 61rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		float: right;
		margin-top: 19rpx;
		margin-left: 14rpx;
	}
</style>
